<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./JS/jQuery.min.js"></script>
</head>

<body style="padding: 15px;">

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">发表评论</h3>
        </div>
        <form class="panel-body" id="formAdd">
            <div>评论人</div>
            <input type="text" class="form-control" name="username">
            <div>评论内容：</div>
            <textarea class="form-control" name="content"></textarea>
            <button type="submit" class="btn btn-primary">发表评论</button>    
        </form>
    </div>

    <!-- 列表评论 -->

    <ul class="list-group" id="cmt_list">
        <li class="list-group-item">
            <span class="badge" style="background-color: skyblue;">评论时间:</span>
            <span class="badge" style="background-color: rgb(2, 181, 181);">评论人:</span>
            
        </li>
    </ul>


    <script>
        $(function () {
            function getCommentList() {
                $.ajax({
                    method: 'GET',
                    url: 'https://ajax-base-api-t.itheima.net/api/cmtlist',
                    data: {},
                    success: function (res) {
                        console.log(res);
                        if (res.status !== 200) return alert('发布失败')

                        let rows = []
                        // 循环拼接字符串
                        $.each(res.data, function (i, item) {
                            let strs = 
                            // '<li class="list-group-item"><span class="badge" style="background-color: skyblue;">评论时间:'+ item.time+'</span><span class="badge" style="background-color: rgb(2, 181, 181);">评论人:'+ item.username+'</span>'+ item.content+'</li>'
                            `<li class="list-group-item">
            <span class="badge" style="background-color: skyblue;">评论时间:${item.time}</span>
            <span class="badge" style="background-color: rgb(2, 181, 181);">评论人:${item.username}</span>${item.content}</li>`
                            rows.push(strs)
                        })
                        // 清空 追加 拼接
                        $('#cmt_list').empty().append(rows.join(''))
                    }
                })
            }

            getCommentList()

            $('#formAdd').on('submit', function(e) {
                // 阻止默认行为
                e.preventDefault()
                // 获取表单里的所有的值
                let data = $(this).serialize()
                // console.log(data);
                $.post('https://ajax-base-api-t.itheima.net/api/addcmt', data, function (res) {
                    if (res.status !== 201) return alert('发布失败')
                    getCommentList()
                // 清空里面的数据 jQuery转化为Dom原生对象
                $('#formAdd')[0].reset()
                 })
            }) 

        })
    </script>

</body>

</html>